{% extends 'base.twig' %} 

{% block extraHead %}
<script src="//cdnjs.cloudflare.com/ajax/libs/blueimp-file-upload/9.5.7/jquery.iframe-transport.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/blueimp-file-upload/9.5.7/jquery.fileupload.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery.imagesloaded/3.0.4/jquery.imagesloaded.min.js"></script>
<style>
.tile a { color: #fff; }
.tile a:hover { color: #ddd; }
.tile .image img { width: 100%; height: 100%; }
.badge { background: #FAF7AA; width: 20px; text-align: center; }
.progress-bar { margin-top: 5px; }
.ui-dialog-titlebar { display: none; }
.assets_navbar { margin-left: 0 !important; margin-bottom: 10px !important; }
.loading { background: #000 url('http://desandro.github.io/imagesloaded/assets/loading.gif') no-repeat center; }
.loading img { visibility: hidden; }

{% block extraStyle %}.asset { cursor: move !important; }{% endblock %}

</style>
{% endblock %} 

{% block menuBar %}
	{{ parent() }}
{% endblock %} 

{% block contentContainer %}
<div class="example">
	<input id="fileupload" type="file" name="files[]" multiple style="display: none;">
	<button class="button large" onclick="$('#fileupload').click();">
		<i class="fa fa-upload"></i>&nbsp;&nbsp;Upload new files
	</button>
	
	<button id="add_folder" class="button large">
		<i class="fa fa-plus-circle"></i>&nbsp;&nbsp;Add new folder
	</button>
	
	<div class="progress-bar large" data-value="0" data-role="progress-bar" data-color="bg-amber" style="display: none; width: 950px;">
		<div class="bar"></div>
	</div>

	<div style="clear: both;"></div>

	<div>&nbsp;</div>
	<fieldset>
		<nav class="breadcrumbs assets_navbar">
			<ul>
				<li><a href="{{ path('assets') }}?view={{ view }}&CKEditorFuncNum={{ CKEditorFuncNum }}"><i class="icon-home"></i></a></li>
				{% for itm in ancestors %}
				<li {% if loop.index == ancestors|length %}class="active"{% endif %}><a href="{{ path('assets-by-folder', { id: itm.id }) }}?view={{ view }}&CKEditorFuncNum={{ CKEditorFuncNum }}">{{ itm.name }}</a></li>
				{% endfor %}
			</ul>
		</nav>
		
		{% if ancestors|length > 1 %} 
		<a href="{{ path('assets-by-folder', { id: ancestors[ancestors|length - 2].id }) }}?view={{ view }}&CKEditorFuncNum={{ CKEditorFuncNum }}">
			<div class="tile bg-gray">
				<div class="tile-content icon">
					<span class="icon-enter-2"></span>
				</div>
			</div>
		</a> 
		{% elseif currentId != 0 %}
		<a href="{{ path('assets') }}?view={{ view }}&CKEditorFuncNum={{ CKEditorFuncNum }}">
			<div class="tile bg-gray">
				<div class="tile-content icon">
					<span class="icon-enter-2"></span>
				</div>
			</div>
		</a> 
		{% endif %} 
		
		<span id="assets_folders"> </span> 
		<span id="assets_files"></span>
	</fieldset>

	<div id="dialog" style="display: none;">
		<form method="POST" autocomplete="off">
			<input type="hidden" name="parentId" value="{{ currentId }}"></input> 
			<label>Folder name</label> 
			<input type="text" name="name" value=""></input> 
			<div>&nbsp;</div>
			<input class="button success large" type="submit" value="Submit"></input>
			<button class="button bg-grey large" onclick="event.preventDefault(); $('#dialog').dialog('close');">Cancel</button>
		</form>
	</div>
</div>
{% endblock %} 

{% block extraFoot %}
<script>
	var _folders = {{ folders._data|json_encode|raw }};
	var _files = {{ files._data|json_encode|raw }};

	$(function() {
		$('#add_folder').on('click', function(ev) {
			$( "#dialog" ).dialog({ position: { my: "left top", at: "left bottom", of: ev.target } });
		});
		
		var pb = $('.progress-bar').progressbar();
		
		var url = '{{ path('upload-assets') }}';
		$('#fileupload').fileupload({
				url: url,
				dataType: 'json',
// 				acceptFileTypes: /(\.|\/)(gif|jpe?g|png)$/i,
// 				maxFileSize: 5000000, // 5 MB
				sequentialUploads: true,
				formData: {
					parentId: {{ currentId }}
				},
				add: function(e, data) {
					var uploadErrors = [];
// 					var acceptFileTypes = /^image\/(gif|jpe?g|png)$/i;
// 					if(data.files[0]['type'] == '' || !acceptFileTypes.test(data.files[0]['type'])) {
// 						uploadErrors.push('Not an accepted file type');
// 					}
					if(data.files[0]['size'] == '' || data.files[0]['size'] > 5000000) {
						uploadErrors.push('File size is too big');
					}
					if(uploadErrors.length > 0) {
						alert(uploadErrors.join("\n"));
					} else {
						$('.progress-bar').show();
						data.submit();
					}
				},
				done: function (e, data) {
					_files.push(data.result);
					repaint();
				},
				progressall: function (e, data) {
					var progress = parseInt(data.loaded / data.total * 100, 10);
					pb.progressbar('value', progress);
				},
				stop: function (e) {
					$('.progress-bar').hide();
				}
		}).prop('disabled', !$.support.fileInput).parent().addClass($.support.fileInput ? undefined : 'disabled');

		repaint();
	});

	function repaint() {
		$('#assets_folders').html('<span id="assets_folders_container" />');
		$('#assets_files').html('<span id="assets_files_container" />');
		
		for (var idx in _folders) {
			var itm = _folders[idx];
			$('#assets_folders_container').append(
				'<div class="tile bg-cyan asset" data-id="' + itm.id + '">' +
					'<div class="tile-content icon">' +
						'<a id="folder-goto-' + itm.id + '" href="/secret/assets/folder/' + itm.id + '?view={{ view }}&CKEditorFuncNum={{ CKEditorFuncNum }}"><span class="icon-folder"></span></a>' +
					'</div>' +
					'<div class="badge">' + itm._childNum + '</div>' +
					'<div class="brand bg-amber">' +
						'<span class="label fg-white"><a {% if view == '' %}href="/secret/contents/detail/Asset/' + (itm.slug != '' ? itm.slug : encodeURIComponent(itm['{{ folders.idField }}'])) + '/' + encodeURIComponent('{{ returnURL|url_encode }}') + '/"{% endif %}>' + itm.name + '</a></span>' +
					'</div>' +
				'</div>'
			);
		}

		for (var idx in _files) {
			var itm = _files[idx];
			$('#assets_files_container').append(
				'<div class="tile asset" data-id="' + itm.id + '">' +
					'<div class="tile-content image loading">' +
						'<img src="/secret/assets/image/' + itm.id + '/290/" alt="Preview" style="height: auto;">' +
					'</div>'+
					'<div class="brand bg-orange">' +
						'<span class="label fg-white"><a {% if view == '' %}href="/secret/contents/detail/Asset/' + (itm.slug != '' ? itm.slug : encodeURIComponent(itm['{{ files.idField }}'])) + '/' + encodeURIComponent('{{ returnURL|url_encode }}') + '/"{% endif %}>' + itm.name + '</a></span>' +
					'</div>' +
				'</div>'
			);
		}

		var imgLoad = imagesLoaded( document.querySelector('#assets_files_container'));
		imgLoad.on( 'progress', function ( imgLoad, image ) {
				image.img.parentNode.className = image.isLoaded ? image.img.parentNode.className.replace('loading', '') : '';
		});

		
		{% block extraJs %}
			var stop = function( event, ui ) {
				$.ajax({
					type: 'POST',
					url: '{{ path('sort-contents') }}',
					data: 'data=' + encodeURIComponent(JSON.stringify($(ui.item[0]).parent().sortable("toArray", { attribute: 'data-id' }))),
					success : function(msg) {}
				});
			};
			$('#assets_folders_container').sortable({ stop: stop });
			$('#assets_files_container').sortable({ stop: stop });
		{% endblock %}
	};
	
</script>
{% endblock %}
